<template>
  <div class="Putforward_information">
    <div class="step">
      <ul>
        <li>
          <a href="javascript:;">1.登录信息</a>
        </li>
        <li>
          <a href="javascript:;">2.维修厂信息</a>
        </li>
        <li>3.提现信息</li>
      </ul>
    </div>
    <div class="form">
      <div>
        <input type="text" v-model="form.account_name" placeholder="输入开户名">
      </div>
      <div>
        <input type="text" v-model="form.account" placeholder="输入提现卡号">
      </div>
      <div class="selectBox">
        <el-select v-model="form.bank" placeholder="请选择开户行">
          <el-option v-for="item of BankList" :key="item.id" :value="item.code" :label="item.name"></el-option>
        </el-select>
      </div>
      <div>
        <input type="text" v-model="form.branch" placeholder="输入所属分行">
      </div>
    </div>
    <div class="next-step">
      <div>
        <el-button type="primary" class="next" :disabled="nextVisible" @click="register">注册</el-button>
      </div>
      <div class="Return">
        <p>已有账号，
          <router-link to="/" replace>马上登录></router-link>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { regThird, getBankCode, deleteInfo,createToken } from "@/server/serverData";
export default {
  name: "PutforwardInformation",
  data() {
    return {
      BankList: [], //银行列表
      form: {
        account_name: "",
        account: "",
        bank: "",
        branch: "",
        sid: this.$route.query.sid
      }
    };
  },
  computed: {
    nextVisible() {
      let state = true,
        account_name = this.form.account_name,
        account = this.form.account,
        bank = this.form.bank,
        branch = this.form.branch;
      if (account_name && account && bank && branch) {
        state = false;
      }
      return state;
    }
  },
  methods: {
    /** 返回并清楚原来注册填写的信息 **/
    async clear() {
      try {
        let res = await deleteInfo();
        this.$router.push({
          path: "Repair_information",
          query: { sid: this.$route.query.sid }
        });
      } catch (err) {
        console.log(err);
      }
    },
    /** 获取银行列表 **/
    async getBank() {
      let res = await getBankCode();
      this.BankList = res;
    },
    /** 注册**/
    async register() {
      let res = await regThird(this.form);
      if (res.data.code == 1) {
        var that = this;
        let getToken= await createToken({sid:this.$route.query.sid})
        if(getToken.code==1){
          window.sessionStorage.setItem('token',getToken.data)
        }
        this.$message({
          message: res.data.msg,
          type: "success",
          duration: "1000",
          onClose() {
            that.$store.commit("CHANGE_SID", that.form.sid);
            /** 拿去缓存中的数据,进行判断选择了那个店铺 1-邦保养加盟pc注册 2-车管家合作小程序注册**/
            let shop_type=  window.sessionStorage.getItem('shop_type')
            switch (shop_type){
              /** 1是邦保养加盟,跳转支付系统使用费**/
              case '1':
                    that.$router.push({
                      path: "/Unpaid",
                      query: { sid: that.form.sid }
                   });
                break;
              /** 2. 车管家合作小程序注册首先去完善信息**/
              case '2':
                that.$router.push({
                  path: "/perfect_information",
                  query: { sid: that.form.sid }
                });
                break
            }
          }
        });
      } else {
        this.$message.error(res.data.msg);
      }
    }
  },
  mounted() {
    this.getBank();
  }
};
</script>
<style scoped lang='scss' rel="stylesheet/scss">
.Putforward_information {
  padding: 40px 46px;
}
.step {
  position: relative;
  width: 100%;
  height: 40px;
  background-image: url("../../public/login/step3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 40px;
  margin-bottom: 40px;
  ul:after {
    display: block;
    content: "";
    clear: both;
  }
  ul {
    .col-919 {
      color: #91969b;
    }
    li {
      width: calc(100% / 3);
      float: left;
      list-style: none;
      text-align: center;
      color: white;
      font-size: 12px;
      a {
        color: white;
      }
    }
  }
}
.form {
  margin-bottom: 69px; 
  & > div {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 10px;
    /deep/ div {
      width: 100%;
    }
    /deep/ input {
      color: #555;
      border: none;
      padding: 15px 0;
      outline: none;
      font-size: 16px;
      width: 100%;
    }
    /deep/ input::-webkit-input-placeholder {
      color: #b9c3cd;
      font-size: 16px;
    }
    /deep/ .el-select {
      margin-bottom: 5px;
    }
    /deep/ .el-input__inner {
      border: none;
      padding-left: 0;
    }
    .Verification {
      background: none;
      float: right;
      border: 1px solid #e5e5e5;
      height: 36px;
      line-height: 36px;
      border-radius: 5px;
      width: 120px;
      text-align: center;
    }
  }
}
.next {
  width: 100%;
}
.Return {
  text-align: center;
  margin-top: 10px;
  a {
    color: #3498e9;
  }
}
</style>